import React, { Component } from "react";
import {Breadcrumb, Tabs, Table, Button, Select, Input, Col, Modal, Radio} from 'antd';
import '../Tkgl/Tkgl.css';
import axios from 'axios'
const {TabPane}=Tabs;
const { Option } = Select;
class Tkgl extends Component{
    constructor(props) {
        super(props);
        this.list= React.createRef();
        this.lister= React.createRef();
        this.myList= React.createRef();
        this.state={
            text1:'',
            text2:'',
            text3:'',
            tuiKuan:[
                // {id:'1',
                //     oderUser:'张国荣',
                //     oderMoney:'1000元',
                //     liuShuiHao:'111',
                //     isState:'已完成',
                //     payFor:'POSS机',
                //     oderTime: '2020-10:00',
                //     payForTime:'2020-03:30',
                //     zhangHao:'20161111',
                //     tell:'13028180204',
                //     nameTrue:'张国荣',
                //     IdCard:'51372111',
                //     haoMa:'1111',
                //     shengQingTime:'2020-13:30',
                //     tuiKuanStyle:'现金返还',
                //     liYou:'房价过高，超过预算'
                // }
            ],
            tuiKuanShenhe:'带审核',
            selectValue:'订单号',
            visible: false,
            data:[]
        }
        this.columns = [{
            title: '订单号',
            align:'center',
            dataIndex: 'key',
            key:'key'
        }, {
            title: '退单号',
            align:'center',
            dataIndex: 'key',
            key:'key'
        },{
            title: '商品',
            dataIndex: 'shop',
            align:'center',
            key:'shop'
        }, {
            title: '申请用户',
            align:'center',
            key:'oderUser',
            dataIndex: 'oderUser',
        }, {
            title: '退款金额',
            align:'center',
            key:'oderMoney',
            dataIndex: 'oderMoney',
        }, {
            title: '申请时间',
            align:'center',
            dataIndex: 'oderTime',
            key:'oderTime'
        },{
            width:"300px",
            title: '操作',
            dataIndex: '',
            key: 'x',
            align:'center',
            render: () => <Button style={{backgroundColor:'pink'}} onClick={()=>this.search()}>查看</Button>
        }];
    }
    render(){
        let {data}=this.state;
        let {tuiKuan}=this.state;
        function callback(key) {
            console.log(key);
        }
        return(
            <div>
                <div className='shurukuang' ref={this.lister}>
                       <div className='duoxuan'>
                           <Select style={{width:"100px"}} placeholder='订单号' value={this.state.selectValue} onChange={this.selectChange}>
                               <Option value="订单号">订单号</Option>
                               <Option value="退单号">退单号</Option>
                           </Select>
                       </div>
                        <Col span="3">
                            <Input placeholder='请输入数字' onChange={this.inputChange1} value={this.state.text1}></Input>
                        </Col>
                        <div className="wenzi">申请时间：</div>
                        <Col span="3">
                            <Input onChange={this.inputChange3} value={this.state.text3}></Input>
                        </Col>
                        {/*<div className="wenzi1">-</div>*/}
                        {/*<Col span="3">*/}
                        {/*    <Input></Input>*/}
                        {/*</Col>*/}
                        <div className="wenzi">买家手机号：</div>
                        <Col span="3">
                            <Input placeholder='请输入手机号' onChange={this.inputChange2} value={this.state.text2}></Input>
                        </Col>
                        <div>
                            <Button onClick={this.Search}>搜索</Button>
                            <Button onClick={()=>this.chongZhi()}>重置</Button>
                        </div>
                    </div>
                <div className='daoHang' ref={this.list}>
                    <Breadcrumb>
                        <Breadcrumb.Item>交易</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            退款管理
                        </Breadcrumb.Item>
                    </Breadcrumb>
                        <div className='hengXian'></div>
                        <Tabs defaultActiveKey="1" onChange={callback}>
                            <TabPane tab="待审核" key="1" >
                                <Table dataSource={data} columns={this.columns} bordered={true} onRow={(record)=>{
                                    return {
                                        onClick:()=>{
                                            let arr1=[]
                                            arr1.push(record)
                                            this.setState({
                                                tuiKuan:arr1,
                                            })
                                            console.log(arr1)
                                        }
                                    }
                                }} pagination={{
                                    position:['bottomCenter'],
                                    defaultPageSize:5
                                }}/>
                            </TabPane>
                            <TabPane tab="待退款" key="2">
                                <Table dataSource={tuiKuan} columns={this.columns} bordered={true} pagination={{
                                    position:['bottomCenter'],
                                    defaultPageSize:5
                                }}/>
                            </TabPane>
                            <TabPane tab="已退款" key="3">
                                <Table dataSource={tuiKuan} columns={this.columns} bordered={true} pagination={{
                                    position:['bottomCenter'],
                                    defaultPageSize:5
                                }}/>
                            </TabPane>
                        </Tabs>
                </div>
                <div ref={this.myList} style={{display:'none'}} className='myList'>
                    <Breadcrumb>
                        <Breadcrumb.Item>交易</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            退款管理
                        </Breadcrumb.Item>
                    </Breadcrumb>
                        <div className='hengXian'></div>
                        <Tabs defaultActiveKey="1" onChange={callback}>
                            <TabPane tab="退款信息" key="1" >
                                <div className='title'>订单信息</div>
                                {tuiKuan.map((item,i)=>
                                <div key={i}>
                                    <div className='dingdanxinxi'>
                                        <div>
                                            <ul>
                                                <li>下单用户:</li>
                                                <li>订单状态:</li>
                                                <li>下单时间:</li>
                                                <li>流_水_号:</li>
                                            </ul>
                                            <ul>
                                                <li>{item.oderUser}</li>
                                                <li>{item.isState}</li>
                                                <li>{item.oderTime}</li>
                                                <li>{item.liuShuiHao}</li>
                                            </ul>
                                        </div>
                                        <div>
                                            <ul>
                                                <li>订_单_号:</li>
                                                <li>订单总额:</li>
                                                <li>付款方式:</li>
                                                <li>付款时间:</li>
                                            </ul>
                                            <ul>
                                                <li>{item.key}</li>
                                                <li>{item.oderMoney}</li>
                                                <li>{item.payFor}</li>
                                                <li>{item.payForTime}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                )}
                                <div className='title'>买家信息</div>
                                {tuiKuan.map((item,i)=>
                                    <div key={i}>
                                        <div className='maijiaxinxi'>
                                            <div>
                                                <ul>
                                                    <li>用户账号:</li>
                                                    <li>联系电话:</li>
                                                </ul>
                                                <ul>
                                                    <li>{item.zhangHao}</li>
                                                    <li>{item.tell}</li>
                                                </ul>
                                            </div>
                                            <div>
                                                <ul>
                                                    <li>真实姓名:</li>
                                                    <li>证件号码:</li>
                                                </ul>
                                                <ul>
                                                    <li>{item.nameTrue}</li>
                                                    <li>{item.IdCard}</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                )}
                                <div className='title'>发起退款</div>
                                {tuiKuan.map((item,i)=>
                                    <div key={i}>
                                        <div className='tuikuanjilu'>
                                            <div>
                                                <ul>
                                                    <li>申请状态:</li>
                                                    <li>申请时间:</li>
                                                    <li>退款形式:</li>
                                                </ul>
                                                <ul>
                                                    <li>{item.isState}</li>
                                                    <li>{item.shengQingTime}</li>
                                                    <li>{item.tuiKuanStyle}</li>
                                                </ul>
                                            </div>
                                            <div>
                                                <ul>
                                                    <li>订单号:</li>
                                                    <li>退款单号:</li>
                                                    <li>退款理由:</li>
                                                </ul>
                                                <ul>
                                                    <li>{item.key}</li>
                                                    <li>{item.key}</li>
                                                    <li>{item.liYou}</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                )}
                                <div className='title'>退款审核</div>
                                {tuiKuan.map((item,i)=>
                                <div key={i}>
                                    <div className='shenhe'>
                                        <div>
                                            <ul>
                                                {/*<li>申请意见:</li>*/}
                                                <li><Button onClick={()=>this.showModal()}>审核</Button></li>
                                            </ul>
                                            <ul>
                                                <li>{this.state.tuiKuanShenhe}</li>
                                            </ul>
                                        </div>
                                        <div>
                                            <ul>
                                                <li>审核人:</li>
                                            </ul>
                                            <ul>
                                                <li>张国荣</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                )}
                            </TabPane>
                        </Tabs>
                    <div style={{textAlign:'center',margin:'15px auto'}}>
                        <Button onClick={()=>this.fanhui()}>返回</Button>
                    </div>
                </div>
                <div>
                    <Modal
                        title="退款"
                        visible={this.state.visible}
                        onOk={this.queRen}
                        onCancel={this.hideModal}
                        okText="提交"
                        cancelText="取消"
                    >
                        <div style={{textAlign:'center'}}>
                            <Radio.Group buttonStyle="solid" onChange={this.Poss}>
                                <Radio.Button value="通过退款">通过</Radio.Button>
                                <Radio.Button value="退款失败">不通过</Radio.Button>
                            </Radio.Group>
                        </div>
                    </Modal>
                </div>
            </div>
        )
    }
    componentDidMount() {
        axios({
            url:'http://123.57.67.148:3000/mock/51/oderData',
            method:'post'
        }).then(res=>{
            let data=res.data.data.filter(item=>{
                item.key=item.id;
                delete item.id;
                return item
            });
            this.setState({
                data:data
            })
        })
    }
    selectChange=(e)=>{
        this.setState({
            selectValue:e
        })
    }
    search=()=>{
        this.list.current.focus();
        this.list.current.style.display='none';
        this.lister.current.focus();
        this.lister.current.style.display='none';
        this.myList.current.focus();
        this.myList.current.style.display='block';
    }
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    hideModal = () => {
        this.setState({
            visible: false,
        });
    };
    Poss=(e)=>{
        console.log(e)
        this.setState({
            tuiKuanShenhe: e.target.value
        });
    }
    queRen = () => {
        this.setState({
            visible: false
        });
    };
    chongZhi(){
        axios({
            url:'http://123.57.67.148:3000/mock/51/oderData',
            method:'post'
        }).then(res=>{
            let data=res.data.data.filter(item=>{
                item.key=item.id;
                delete item.id;
                return item
            });
            this.setState({
                data:data
            })
        })
    }
    fanhui=()=>{
        this.list.current.focus();
        this.list.current.style.display='block';
        this.lister.current.focus();
        this.lister.current.style.display='flex';
        this.myList.current.focus();
        this.myList.current.style.display='none';
    }
    inputChange1=(e)=>{
        console.log(e.target.value);
        this.setState({
            text1: e.target.value
        })
    };
    inputChange2=(e)=>{
        this.setState({
            text2: e.target.value
        })
    };
    inputChange3=(e)=>{
        this.setState({
            text3: e.target.value
        })
    };
    Search=()=>{
        let text1=this.state.text1;
        let text2=this.state.text2;
        let text3=this.state.text3;
        let arr1=this.state.data;
        let Arr=[];
        for(let i=0;i<arr1.length;i++){
            if(text1===arr1[i].key||text2===arr1[i].key||text3===arr1[i].oderTime){
                Arr.push(arr1[i]);
                // arr1=[];
                this.setState({
                    data:Arr
                })
            }
        }
    }
}
export default Tkgl;